import React, { Component } from 'react';
import { AppRegistry, SectionList, StyleSheet, Text, View } from 'react-native';

class SectionListC extends Component{
	render(){
		return(
			<SectionList
			  sections={this.props.items}
			  renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
			  renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
			/>
			//<ListView
				//dataSource={this.state.preWeather}
				//renderRow={this.renderListRow.bind(this)}
			//>ListView</ListView>
		)
	}
}

export default class SectionListBasics extends Component {
  render() {
    return (
      <View style={styles.container}>
		<SectionListC items={[
            {title: 'D', data: ['Devin']},
            {title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
			{title: 'A', data: ['Devin']},
            {title: 'C', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
			{title: 'B', data: ['Devin']},
            {title: 'TX', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
			{title: 'JD', data: ['Devin']},
            {title: 'YY', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
			{title: 'WX', data: ['Devin']},
            {title: 'AL', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
          ]}/>
      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  sectionHeader: {
    paddingTop: 2,
    paddingLeft: 10,
    paddingRight: 10,
    paddingBottom: 2,
    fontSize: 14,
    fontWeight: 'bold',
    backgroundColor: 'rgba(247,247,247,1.0)',
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
})